<template>
      <div>
    <ul class="wx-list">
      <li v-for="(item,index) in wx_list.list" :key="index" >
        <p class="wx-p">{{item.title}}</p>
        <p class="wx-p1">共{{item.total_periods}}课时</p>
        <div class="wx-div" v-for="(v,i) in item.teachers_list" :key="i" v-if="i< 1">
          <img :src="v.teacher_avatar" alt />
          <p>{{v.teacher_name}}</p>
        </div>
        <div class="wx-bottom">
          <p>{{item.sales_num}}人已报名     {{item.price}}.00</p>
        
         
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
     name:'',
    components: {

    },
    props: [
        "wx_list"
    ],
    data() {
        return {

        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style scoped>
.wx-list{
    width: 100%;
}
.wx-list>li{
    background: #fff;
    width: 90%;
    margin:0 auto;
    padding:10px;
    margin-bottom:10px;
    box-sizing:border-box;
    
    
}
.wx-list>li>.wx-p{
    font-size:15px;
}
.wx-list>li>.wx-p1{
     color: #666;
    line-height: 18px;
}
.wx-list>li>.wx-div{
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.wx-list>li>.wx-div>p{
    margin-left: 10px;
}
.wx-list>li>.wx-div>img{
   background: #000;
   width: 30px;
   height: 30px;
   border-radius: 50px;
}
.wx-list>li>.wx-botton{
    margin-top:20px;
    display: flex;
    justify-content: space-between;
   color: #999
}
.wx-list>li>.wx-bottom>.wx-price{
    font-size:15px;
    
}
</style>
